import React, { Component } from "react";
import './DouyinList.css';
import axios from 'axios';
import {Link} from 'react-router-dom';

export default class DouyinList extends Component {

    //状态
    state = {
        videos: []
    }

    render() {
        return (
            <div className="container">
                <hr />
                <button className="btn btn-danger" onClick={() => this.props.history.go(1)}>前进</button>
                <hr />
                <h2 className="page-header">视频列表</h2>
                <div className="row">
                    {
                        this.state.videos.map(item => {
                            return <div className="col-xs-3" key={item.id}>
                                <div  className="img">
                                    <img onClick={this.jump(item.id)} width="100%" src={item.cover} alt="" />
                                </div>
                                <p>{item.desc}</p>
                            </div>
                        })
                    }
                    
                </div>
            </div>
        );
    }

    //单击事件处理程序
    jump = (id) => {
        return () => {
            //push
            //1. params 
            // this.props.history.push('/play/' + id);
            //2. query 传参
            // this.props.history.push('/play?id=' + id);
            //3. state 传参
            this.props.history.push({
                pathname: '/play',
                //这里的 state 数据存储到了 history 对象中
                state: {
                    id: id
                }
            });

            //replace
            // this.props.history.replace({
            //     pathname: '/play',
            //     state: {
            //         id: id
            //     }
            // });
        }
    }

    //组件挂载完毕的生命周期函数
    async componentDidMount(){
        let result = await axios.get('http://api.xiaohigh.com/douyin?_limit=24');
        this.setState({
            videos: result.data
        })
    }
}
